import React, { Component } from 'react'
import { Radio, Stepper, Checkbox } from 'antd-mobile'
import { FormattedMessage } from 'react-intl'
import { PriceItem } from './'
import { helper, config, myFetch } from '../utils'

export default class LimitStopAll extends Component {
	state = {
		value: 3,
		price: this.props.orderPrice,
    	flag: false,
    	rangePrice: 0,
    	number: 0
	}
	changePrice = 0
	  componentWillReceiveProps(nextProps) {
	    if (nextProps.direction != this.props.direction ) {
	      this.setState({
	        flag: false
	      })
	    }
	  }
	 onChangeStepper = (e) => {
	 	console.log(e, 'e')
	    let len = 5
	    let num = 0
	    let digit = 0
	    if (this.props.ccy.includes('JPY')) {
	      len = 3
	    }
	    if (len == 5) {
	      num = helper.accDiv(e, 10000)
	      console.log(num)
	      digit = 5
	    } else if (len == 3) {
	      num = helper.accDiv(e, 100)
	      digit = 3
	    }
	    if (this.state.flag) {
	      if (!this.changePrice) {
	         this.changePrice = this.props.orderPrice
	      }
	      this.setState({
	        price: Number(helper.accAdd(this.changePrice, num).toFixed(digit)),
	        rangePrice: this.changePrice,
	        flag: true
	      }, () => {
           this.changePrice = this.state.price
	        this.props.onTimesChange(this.state.price)
	      })
	    } else {
	      this.setState({
	        price: Number(helper.accAdd(this.props.orderPrice, num).toFixed(digit)),
	        rangePrice: this.props.orderPrice,
	        flag: true
	      }, () => {
	        this.changePrice = this.props.orderPrice
	        this.props.onTimesChange(this.state.price)
	      })
	    }
	 }
	 onRangePrice = (direction, type) => {
	    let result
	    if (direction == 0) {
	      if (type == 4) {
	        result = '≤'
	      } else if (type == 3) {
	        result = '≥'
	      }
	    } else if (direction == 1) {
	      if (type == 4) {
	        result = '≥'
	      } else if (type == 3) {
	        result = '≤'
	      }
	    }
	    return result
	 }
	 onValue = (type, direction) => {
	    let max = Infinity
	    let min = -Infinity
	    let arr = []
	    if (direction == 0) {
	      if (type == 4) {
	        max = 0
	      } else if (type == 3) {
	        min = 0
	      }
	    } else if (direction == 1) {
	      if (type == 4) {
	        min = 0
	      } else if (type == 3) {
	        max = 0
	      }
	    }
	    arr.push(max, min)
	    //console.log(arr, 'arr')
	    return arr
	 }
	onChange = (value) => {
		this.setState({
			value,
			price: this.props.orderPrice,
	    	flag: false,
	    	rangePrice: 0,
		}, () => {
			this.props.onChange(value)
		})
	}
	render() {
		const { orderPrice,direction, className } = this.props
		const data = [
			{value: 3, classname: '-left', label: 'limit'},
			{value: 4, classname: '-right', label: 'stop'}
		]
		return (
			<div className="rt-limit-stop">
				<div className="-condirection-type">
					{
					  data.map( i => {
					  	return (
					  		<div className={`${this.state.value === i.value ? i.classname + ' -active' : i.classname}` } key={i.value}>
								<Checkbox
								  checked={this.state.value === i.value}
								  onChange={
								  	() => {
								  		this.onChange(i.value)
								  	}
								  }
								/>
								<FormattedMessage id={i.label}/>
							</div>
					  		)
					  }) 
					}
					
				</div>
				<div className={`rt-price-item`}>
		          <span className="-wrap-left">
		          	  <FormattedMessage id="price"/>
		          <span className="-price-range">
		           {this.onRangePrice(direction, this.state.value)}{this.props.orderPrice}
		          </span>
		        </span>
		        <div className="-wrap-price-right">
		          <Stepper
		            className="rt-order-stepper"
		            max={this.onValue(this.state.value, direction)[0]}
		            min={this.onValue(this.state.value, direction)[1]}
		            onChange={this.onChangeStepper}
		            value={this.state.flag ? this.state.price : this.props.orderPrice}
		            showNumber
		            step='1'
		          />
		        </div>
		      </div>
			</div>
			)
	}
}